<template>
	<view>
		<view class="talk-list">
			<view class="talk-item">
				<view class="user-info-box">
					<u-avatar @click="userCenter(item)" :src="item.avatar"></u-avatar>
					<view class="user-info">
						<view class="user-name-box">
							<view class="user-name">{{item.nickName}}</view>
							<view class="sex-box-nv" v-if="item.sex == 1">
								<u-icon name="ziyuan2" custom-prefix="iconfont"></u-icon>
								<view class="age-text">{{item.age}}</view>
							</view>
							<view class="sex-box" v-else>
								<u-icon name="ziyuan3" custom-prefix="iconfont"></u-icon>
								<view class="age-text">{{item.age}}</view>
							</view>
							<view class="vip-box" v-if="item.isPay == '1'">
								<u-icon name="xianxinghuiyuan" custom-prefix="iconfont"></u-icon>
								<view class="vip-text">贵族</view>
							</view>
						</view>
						<view class="user-name-box">
							<view class="user-tag-box">
								<view class="user-tag">IP:{{item.city}}</view>
								<!-- <u-line length="22rpx" margin="10px" direction="col"></u-line>
								<view class="user-tag">1.2km</view> -->
							</view>
						</view>
					</view>
					<view v-if="chat_flag == 1">
						<view class="fan-btn" @click="addWechat(item)" v-if="item.wechatFlag">
							<u-icon name="weixin-fill" color="#19be6b" size="36"></u-icon>
						</view>
						<view class="fan-btn" @click="apply(item)" v-else>
							<u-icon name="heart-fill" color="#fe709f" size="36"></u-icon>
						</view>
					</view>
				</view>
				<view class="content-box">
					<view class="text-box">
						<rich-text :nodes="item.message"></rich-text>
					</view>
				</view>
				<view v-if="item.image">
					<view class="image-one" v-if="item.image.split(',').length <= 2">
						<u-album :urls="item.image.split(',')" @preAd="preAd" :locks="item.imageLock" fontSize="large" :multipleSize="220" :rowCount="3" :maxCount="6" :maxRow="2"></u-album>
					</view>
					<view class="image-list" v-else>
						<u-album :urls="item.image.split(',')" @preAd="preAd" :locks="item.imageLock" :multipleSize="185" :rowCount="3" :maxCount="6" :maxRow="2"></u-album>
					</view>
				</view>
				<view class="no-image" v-else></view>
				<view class="tab-box" v-if="item.topicList">
					<view class="tag" v-for="(topic, index) in item.topicList" :key="index">#{{topic.title}}#</view>
				</view>
				<view class="footer-box">
					<view class="talk-time">{{item.time}}</view>
					<view class="menu-box" @click="sheetBtn(item)">
						<u-icon name="leimuxigengduo" size="38" color="#82848a" custom-prefix="iconfont"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		props: {
			item: {
				// 动态数据
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {
				sheetList: [],
			}
		},
		created() {
			this.init();
	    },
		computed: {
			...mapState(['vuex_user','chat_flag']),
		},
		methods: {
			init() {
				
			},
			previewImage(index, imgList) {
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgList, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					indicator: 'number',
					loop: true
				});
			},
			sheetBtn(item) {
				var userId = uni.getStorageSync("userId");
				this.sheetList = [];
				var jubao = {
					text: '举报',
					tag: 'jubao',
					subText: '广告拉人、扰乱平台秩序等',
				};
				var remove = {
					text: '删除',
					tag: 'remove',
				};
				if(item.userId == userId){
					remove.id = item.id;
					this.sheetList.push(remove);
				}else{
					jubao.id = item.id;
					this.sheetList.push(jubao);
				}
				this.$emit('menu', this.sheetList);
			},
			userCenter(item) {
				if(this.my){
					return;
				}
				
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/center/index',
						params: {
							userId: item.userId,
						}
					});
				});
			},
			chat() {
				this.$emit('chat');
			},
			thumb() {
				this.$u.toast('点赞');
			},
			getAmount() {
				this.$u.get('/pay/userCoin/getAmount').then(res => {
					this.$store.commit('setAmount', res.data);
				});
			},
			apply(e) {
				this.$u.post('/wq/friendApply/add',{
					userId: e.userId,
				}).then(res => {
					var roomId = res.data.roomId;
					this.$u.route({
						url: 'packgeMine/pages/chat/chat',
						params: {
							roomId: roomId,
						}
					});
				});
			},
			addApply(e) {
				this.$u.post('/wq/friendApply/addWechat',{
					userId: e.userId,
				}).then(res => {
					this.getAmount();
					this.$u.route({
						url: 'packgeMine/pages/chat/chat',
						params: {
							roomId: res.data.roomId,
						}
					});
				});
			},
			addVipApply(e) {
				this.$u.post('/wq/friendApply/addVipWechat',{
					userId: e.userId,
				}).then(res => {
					this.$refs.uToast.show({
						title: '剩余'+res.wechatNum+'次',
						type: 'success',
						duration: 1000,
						url: 'packgeMine/pages/chat/chat?roomId='+res.roomId
					});
				});
			},
			addWechat(item) {
				this.judgeVipNum((res) => {
					if(res.wechatNum > 0){
						this.addVipApply(item);
					}else{
						this.addApply(item);
					}
				});
			},
			preAd(run) {
				var _this = this;
				
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						var code = loginRes.code;
						_this.$u.get('/system/config/getAdValue',{
							code: code,
							appId: _this.website.appId
						}).then(res => {
							uni.login({
								provider: 'weixin',
								success: function(e) {
									_this.openImg(e.code, res.data, res.adId, run);
								},
								fail: function() {
									
								}
							});
						});
					},
					fail: function() {
						
					}
				});
			},
			openImg(code,config,adId,run) {
				var adNum = uni.getStorageSync("adNum");
				if(adNum > 0){
					adNum = adNum - 1;
					uni.setStorageSync("adNum", adNum);
					run(true);
					return;
				}
				
				var adFlag = false;
				var content = "观看广告并点击广告下方绿色按钮后再返回，即可解锁资源";
				if("0" == config){
					run(true);
					return;
				}else if("1" == config){
					// 需要点击广告
					adFlag = false;
				}else if("2" == config){
					// 不需要点击广告
					adFlag = true;
					content = "观看广告后，即可解锁资源";
				}else if("3" == config){
					// 需要转发好友
					content = "今日观看广告次数已用完，请转发好友或者群聊，即可解锁5次资源";
				}
				
				var _this = this;
				uni.showModal({
				  title: '提示',
				  content: content,
				  success: (res) => {
				    if (res.confirm) {
						if("3" == config){
							uni.setStorageSync("adClick", false);
							uni.$off('test');
							uni.$on('test', function(res){
								if(res){
									uni.setStorageSync("adNum", 4);
									_this.$store.commit('setCash', false);
									_this.addAdLog(code, "03");
									uni.$off('test');
									run(true);
								}else{
									uni.showModal({
									  title: '您没有转发成功',
									  content: '您没有转发成功，请重新来过',
									  showCancel: false,
									  success: (res) => {
										  run(false);
									  }
									});
								}
							});
							_this.$store.commit('setCash', true);
							return;
						}
						//加载激励广告
						_this.$utils.videoAdInit(adId);
						// 在适合的场景显示插屏广告
						_this.$utils.videoAdShow()
						.then((res) => {
						  if (res) {
							var adClik = uni.getStorageSync("adClick");
							console.log("点击广告"+adClik);
							if(adClik || adFlag){
								if(adClik){
									_this.addAdLog(code, "02");
								}else{
									_this.addAdLog(code, "01");
								}
								run(true);
							}else{
								_this.addAdLog(code, "01");
								uni.showModal({
								  title: '您没有点击绿色按钮',
								  content: '您没有点击绿色按钮，请重新来过',
								  success: (res) => {
									  run(false);
								  }
								});
							}
						  } else {
							console.log('广告提前退出')
							_this.addAdLog(code, "00");
							run(false);
						  }
						})
						.catch((err) => {
							console.log('广告加载失败')
							run(false);
						});  
				    }
				  }
				});
			},
			addAdLog(code, action) {
				this.$u.post('/wq/ad/add',{
					adAction: action,
					appId: this.website.appId,
					code: code,
				}).then(res => {
					
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.talk-list {
		padding: 15px;
		padding-top: 0;
	}
	
	.weui-cell {
	  position: relative;
	}
	
	.weui-cell:after {
	    content: " ";
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    height: 1px;
	    border-bottom: 1px solid #e5e5e5;
	    color: #e5e5e5;
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    z-index: 2;//看情况使用
	}
	
	.user-info-box {
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		padding-top: 20px;
	}
	.user-info {
		display: flex;
		flex-direction: column;
		padding-left: 10px;
		flex: 1;
	}
	.user-name {
		font-size: 30rpx;
		margin-right: 5px;
	}
	.user-woman {
		background-color: #e8bebe;
		display: flex;
		align-items: center;
		border-radius: 100%;
		padding: 3px;
	}
	
	.user-man {
		background-color: #a9c5e2;
		display: flex;
		align-items: center;
		border-radius: 100%;
		padding: 3px;
	}
	.user-name-box {
		display: flex;
		align-items: center;
	}
	.user-tag-box {
		display: flex;
		align-items: center;
	}
	.user-tag {
		font-size: 20rpx;
		color: #82848a;
		line-height: 70rpx;
	}
	.menu-box {
		display: flex;
	}
	.content-box {
		margin: 10px 0;
		margin-bottom: 0;
		padding: 0 10rpx;
	}
	.image-list {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 10px;
		margin-top: 10px;
	}
	.image-card {
		width: 30%;
		margin: 5px;
	}
	.no-image {
		margin-bottom: 20px;
	}
	.image-one {
		margin-top: 10px;
		margin-bottom: 20px;
	}
	.text-box {
		white-space: pre-wrap;
	}
	.footer-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
	}
	.talk-time {
		font-size: 26rpx;
		color: #909399;
	}
	.toolbar-box {
		display: flex;
		align-items: center;
	}
	.toolbar {
		display: flex;
		align-items: center;
		margin-left: 40px;
		color: #82848a;
	}
	.toolbar-text {
		font-size: 26rpx;
		margin-left: 5px;
	}
	.fan-btn {
		border: 1px solid #19be6b;
		color: #fff;
		font-size: 24rpx;
		padding: 6rpx 30rpx;
		border-radius: 50px;
	}
	.tab-box {
		display: flex;
		margin-bottom: 15px;
	}
	.tag {
		border: 1px solid #6544826b;
		padding: 1px 5px;
		border-radius: 30px;
		font-size: 10px;
		color: #757272;
		margin-right: 10px;
	}
	.sex-box {
		background-color: #2b85e4;
		display: flex;
		color: #fff;
		padding: 2px 5px;
		border-radius: 20px;
		font-size: 8px;
	}
	.sex-box-nv {
		background-color: #fe709f;
		display: flex;
		color: #fff;
		padding: 2px 5px;
		border-radius: 20px;
		font-size: 8px;
	}
	.age-text {
		margin-left: 2px;
	}
	.vip-box {
		color: #fff;
		margin-left: 5px;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f7ce05;
		padding: 6rpx 10rpx;
		border-radius: 20px;
	}
	.vip-text {
		font-size: 16rpx;
	}
</style>
